import { useCallback, useEffect, useState } from 'react';
import { NavBar, Empty } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { DatePicker, Space, ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';
import dayjs from 'dayjs';
import { getComplaint, delComplaint } from '../../interfaces';
import './css/com.css';
import img1 from '../My/img/头像.png';

export default function ComplaintReport() {
  const user = localStorage.getItem('user');
  const options = ['', '食品安全', '卫生安全', '其它'];
  const navigate = useNavigate();
  const [selectedMonth, setSelectedMonth] = useState(dayjs());
  const [list, setlist] = useState([]);
  const [type, settype] = useState('');
  const [xs, setsx] = useState(false)
  const onChange = (date) => {
    if (!date) return;
    setSelectedMonth(date);
    console.log(date.format('YYYY年M月'));
  };
  const getlist = useCallback(async () => {
    try {
      if (!selectedMonth) return;
      const { data: { list } } = await getComplaint(
        selectedMonth.format('YYYY-MM'),
        type
      );
      setlist(list.filter(i => i.user === user));
      setsx(true)
      console.log(list);
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  }, [selectedMonth, type, user]);
  const handleDelete = async (id) => {
    console.log(id);

    try {
      await delComplaint(id);
      getlist();
      console.log(1);
      // 刷新列表
    } catch (error) {
      console.error('删除失败:', error);
    }
  };
  function getTypeColor(type) {
    const typeColors = {
      '食品安全': 'linear-gradient(to right, #ff758c, #ff7eb3)',
      '卫生安全': 'linear-gradient(to right, #7f7fd5, #86a8e7)',
      '其它': 'linear-gradient(to right, #a8e063, #56ab2f)'
    };
    return typeColors[type] || 'linear-gradient(to right, #4facfe, #00f2fe)';
  }
  useEffect(() => {
    getlist();
  }, [getlist]);

  return (
    <ConfigProvider locale={zhCN}>
      <div style={{ minHeight: '100vh', backgroundColor: '#f5f7fa' }}>
        <NavBar
          title={<h3 style={{ margin: 0, fontSize: '18px', color: '#333' }}>我的投诉</h3>} onClickLeft={() => navigate(-1)}
          style={{ '--rv-nav-bar-background-color': '#ffffff', '--rv-nav-bar-icon-color': '#666', '--rv-nav-bar-arrow-size': '20px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }} />
        <div style={{ backgroundColor: '#e3f7f3', padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderRadius: '0 0 12px 12px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <img src={img1} alt="用户头像" style={{ width: '48px', height: '48px', borderRadius: '50%', border: '2px solid #fff', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }} />
            <div style={{ marginLeft: '12px' }}>
              <h3 style={{ margin: 0, fontSize: '16px', color: '#333' }}>L*2</h3>
              <span style={{
                display: 'inline-block',
                background: 'linear-gradient(to right, rgba(209, 119, 24, 0.48), rgba(223, 189, 15, 0.8))', padding: '2px 8px', borderRadius: '12px', fontSize: '12px', color: '#fff', marginTop: '4px'
              }}>
                学生家长
              </span>
            </div>
          </div>
          <button
            onClick={() => navigate('/complaint')}
            style={{
              background: 'linear-gradient(to right, #4facfe, #00f2fe)', border: 'none', color: '#fff', padding: '8px 12px', borderRadius: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 8px rgba(0,0,0,0.1)', cursor: 'pointer'
            }}
          >
            <span style={{ fontSize: '18px', marginRight: '4px' }}>+</span>
            <span>投诉</span>
          </button>
        </div>
        <div style={{
          backgroundColor: '#ffffff', padding: '12px 16px', margin: '12px 16px', borderRadius: '12px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'
        }}>
          <Space direction="vertical">
            <DatePicker
              style={{
                width: '120px', borderRadius: '8px', border: '1px solid #eaeaea'
              }}
              value={selectedMonth}
              onChange={onChange}
              picker="month"
              format="YYYY年M月"
              placeholder="选择月份"
              allowClear={false}
            />
          </Space>
          <span style={{ color: '#666' }}>
            共<span style={{ color: '#4facfe', fontWeight: 'bold', margin: '0 2px' }}>{list.length}</span>条
          </span>
          <select
            style={{
              width: '100px', padding: '6px 8px', borderRadius: '8px',
              border: '1px solid #eaeaea',
              outline: 'none',
              color: '#666'
            }}
            onChange={(e) => settype(e.target.value)}
            value={type}
          >
            {options.map(i => <option value={i} key={i}>{i === '' ? "全部" : i}</option>)}
          </select>
        </div>

        {/* 投诉列表 */}
        <div style={{
          padding: '0 16px',
          marginBottom: '20px'
        }}>
          {list.length > 0 && xs ? (
            list.map(i => (
              <div
                key={i._id}
                style={{
                  backgroundColor: '#ffffff', padding: '12px 16px', marginBottom: '12px', borderRadius: '12px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)', transition: 'all 0.3s ease'
                }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <h4 style={{
                    margin: 0, fontSize: '16px', color: '#333', fontWeight: '500', maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'
                  }}>
                    {i.title}
                  </h4>
                  <span style={{
                    background: getTypeColor(i.type), color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '10px'
                  }}>
                    {i.type}
                  </span>
                 
                </div>
                <p style={{
                  color: '#666', fontSize: '14px', margin: '8px 0', lineHeight: '1.5', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden'
                }}>
                  {i.content}
                </p>
                <p style={{
                  color: '#666', fontSize: '14px', margin: '8px 0', lineHeight: '1.5', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden'
                }}>
                  {i.school}
                </p>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#999', fontSize: '12px'
                }}>
                  <span>{i.time}</span>
                  <button
                    onClick={() => handleDelete(i._id)}
                    style={{
                      background: 'none', border: '1px solid #ff4d4f', color: '#ff4d4f', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', cursor: 'pointer', transition: 'all 0.3s'
                    }}
                    onMouseOver={(e) => {
                      e.target.style.background = '#ff4d4f'; e.target.style.color = '#fff';
                    }}
                    onMouseOut={(e) => {
                      e.target.style.background = 'none'; e.target.style.color = '#ff4d4f';
                    }}
                  >
                    删除
                  </button>
                </div>
              </div>
            ))
          ) : xs?(<div style={{
              display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh'
            }}>
              <Empty
                description="暂无投诉记录"
                image={<div style={{
                  width: '80px', height: '80px', background: '#e6f7ff', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', marginBottom: '16px'
                }}>
                  <span style={{ fontSize: '40px', color: '#4facfe' }}>📝</span>
                </div>}
                style={{
                  '--rv-empty-description-color': '#888',
                  '--rv-empty-description-font-size': '14px'
                }}
              />
           </div>
          ):''}
        </div>
      </div>
    </ConfigProvider>
  );
}
